<template>
	<view class="s-page-wrapper is-80vh" style="position: relative;height: 100vh;">
		<view class="is-20vh has-mgt-30">
			<view class="is-flex is-column is-justify-center  is-align-center is-height-100">
				<image src="../../static/user/face.png" mode="aspectFit" class="logoimg"></image>
			</view>
		</view>
		<view class="content">
			<view class="has-mglr-10 ">
				<view class=" has-mgtb-10 ">
					<input type="number" maxlength="11" v-model="login.mobile" placeholder="请输入手机号" class="is-input1 " @input="BindInput"
					 data-val="phone" />
				</view>
				<view v-if="login.loginType=='1'" class=" has-radius has-mgtb-10">
					<input type="password" v-model="login.password" placeholder="请输入登录密码" class="is-input1" data-val="password" />
				</view>
				<view v-if="login.loginType=='3'" class=" has-radius has-mgtb-10" style="margin-top: 20rpx;">
					<input type="number" v-model="login.code" placeholder="请输入验证码" class="is-input1" data-val="password" />
				</view>

				<view class=" loginbtn has-radius has-mgtb-20">
					<button :loading="login.loading" @click="defaultHandlerLogin()"> {{ login.loading ? "登录中...":"登 录"}} </button>
					<button class="has-mgtb-20" v-if="login.loginType=='3'" @click="getVerCode()"> 获取验证码
					</button>
				</view>
			</view>
		</view>
		<view class="is-20vh has-mgt-80 content">
			<navigator url="#" class=" has-radius is-right is-grey has-mgr-20" hover-class="">
				<text>忘记密码？</text>
				<text v-if="login.loginType=='1'" class="is-blue" @click="sendCode('3')">短信登录</text>
				<text v-if="login.loginType=='3'" class="is-blue" @click="sendCode('1')">密码登录</text>
			</navigator>
		</view>
		
		<view class="foot_end">
			<text class="is-grey" @click="registered()">注册账号</text>
		</view>
	</view>
</template>

<script>
	import md5 from '../../common/libs/md5.js'
	export default {
		data() {
			return {
				login: {
					loading: false,
					mobile: "",
					password: "",
					code: '',
					loginType: '1'
				},
				isgt: false,
			};
		},
		onLoad() {

		},
		methods: {
			registered:function(){
				uni.navigateTo({
					url:'../registered/registered'
				})
			},
			defaultHandlerLogin: function() {
				this.login.loading = true;
				setTimeout((e => {
					this.login.loading = false;
				}), 1500);
				this.logins()
				console.log(JSON.stringify(this.login));
			},
			defaultHandlerLogins: function() {
				var that = this
				if (that.login.mobile) {
					that.getVerCode()
				} else {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
				}

			},
			BindInput: function(e) {
				var dataval = e.currentTarget.dataset.val;
				this.login[dataval] = e.detail.value;
			},
			logins() {
				// var data = this.login
				// uni.switchTab({
				// 	url: '../home/home',
				// 	animationType: 'slide-in-bottom'
				// })
				      let data = {
				        mobile: this.login.mobile,
				        password:md5(this.login.password),//md5(this.password),
				        code:'',
				        loginType:this.login.loginType
				      };
				
				uni.request({
					// url: 'https://api.zrxff.com/api/v1/user/login',
					url: 'https://api.zrxff.com/zrxapi/v1/user/login',
					method: 'POST',
					data: data,
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: (res) => {
						console.log(res)
						if (res.data.errno == 0) {
							uni.showToast({
								title: res.data.errmsg,
							});
							uni.setStorageSync('token', res.data.Token)
							uni.setStorageSync('loginForm',{
								  mobile: data.mobile,
								  password: data.password,
							})
							uni.setStorageSync('userInfo', res.data.User)
							uni.setStorageSync('smsnum', res.data.smsnum)
							// uni.switchTab({
							// 	url: '../home/home',
							// 	animationType: 'slide-in-bottom'
							// })
					
					//#ifdef H5
					uni.reLaunch({
						url: '../main/main'
					})
					//#endif
					
					// #ifndef H5
					var platform = uni.getSystemInfoSync().platform
					var type = 1
					if (platform == 'android') {
						type = 1
					} else {
						type = 2
					}
					this.$api.setToken({
						"Appos": type,
						"deviceno": uni.getStorageSync('cid')
					}).then(res => {
							console.log(res)
							uni.reLaunch({
								url: '../main/main'
							})
						})
						//#endif
					
					
						} else {
							uni.showToast({
								title:res.data.errmsg,
							})
						}

					}

				})
			},
			sendCode(type) {
				// 切换登录
				this.login.loginType = type
			},
			getVerCode() {
				var that = this
				if (that.login.mobile) {
					let data = {
						mobile: that.login.mobile,
						codeType: '1'
					};
					this.$api.sendCode(data).then(res => {
						
						uni.showToast({
							title: res.data.errmsg,
							icon: 'none'
						})
						console.log(res)
					})
				} else {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
				}

			},
		}
	}
</script>

<style>
	page {
		min-height: 100%;
		background-color: #FFFFFF;
	}

	.content {
		width: 85%;
		margin: 0 auto;
	}

	.loginbtn button {
		margin-top: 20rpx;
		height: 88rpx;
		width: 100%;
		line-height: 88rpx;
		color: #ffffff;
		font-size: 32rpx;
		border-radius: 44rpx;
		outline: 0;
		display: block;
		margin: 0;
		font-family: inherit;
		background: #C02C38;
		opacity: 0.8;
	}

	button:after {
		border: 2rpx solid #f2f2f2;
	}

	.logoimg {
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
	}

	.is-input1 {
		height: 88rpx;
		width: 100%;
		line-height: 88rpx;
		padding: 12rpx;
		color: #353535;
		font-size: 32rpx;
		box-sizing: border-box;
		appearance: none;
		border: 2rpx solid #e5e5e5;
		box-shadow: none;
		border-radius: 44rpx;
		outline: 0;
		display: block;
		padding-left: 30rpx;
		margin: 0;
		font-family: inherit;
		background: #fff;
		resize: none;
	}
	.foot_end{
		position: absolute;
		left: 0rpx;
		bottom: 10rpx;
		width: 100vw;
		height: 40vh;
		line-height: 40vh;
		text-align: center;
	}
</style>
